<template>
  <div class="main">
    <div class="title"><h2>提交评论</h2></div>
    <div class="text">
      <slot name="text"></slot>
    </div>
    <div class="btn">
      <slot name="publish"></slot>
    </div>
    <div class="title">
      <h2>评论列表</h2>
      <span>44条评论</span>
    </div>
    <ul class="issueList">
      <slot name="content_list"></slot>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.main {
  margin-top: 40px;
  .title {
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #999;
    h2 {
      font-size: 30px;
      font-weight: 700;
    }
    span {
      color: #666;
    }
  }
  .text {
    padding: 20px;
    textarea {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      padding: 10px;
      border-radius: 5px;
    }
  }
  .btn {
    padding: 0 20px 20px;
    width: 100%;

    border-bottom: 1px solid #999;
    .wid {
      width: 100%;
    }
  }
  .issueList {
    margin-bottom: 70px;
    li {
      padding: 20px;
      border-bottom: 1px solid #999;
      .content {
        padding-bottom: 20px;
        color: #333;
      }
      .name {
        display: flex;
        justify-content: space-between;

        span {
          &:first-child {
            color: #26a2ff;
          }
          &:last-child {
            color: #333;
          }
        }
      }
    }
  }
}
</style>